<template>
  <div class="d-container">
    <Tabs :tabs="tabsList" @tabClick="handleTabClick"/>
    <div class="content">
      <generalSituation v-if="tabIndex === 0"/>
      <existSystem v-if="tabIndex === 1"/>
      <systemDesign v-if="tabIndex === 2"/>
      <systemOnline v-if="tabIndex === 3"/>
    </div>
  </div>
</template>

<script setup>
import Tabs from "@/components/tabs/index.vue";
import generalSituation from "./generalSituation.vue";
import existSystem from "./existSystem.vue";
import systemDesign from "./systemDesign.vue";
import systemOnline from "./systemOnline.vue"
import {ref} from "vue";

const tabsList = [
  {title: "总体情况", value: 1},
  {title: "既有系统", value: 2},
  {title: "新建系统设计", value: 3},
  {title: "新建系统上线", value: 4},
];

let tabIndex = ref(0);

function handleTabClick(index) {
  tabIndex.value = index
}

</script>

<style scoped lang="scss">
.d-container {
  height: 100%;
  padding: 40px 10px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
  }
}
</style>
